<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" ipt="IE=edge">
    <meta name="viewport" ipt="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        textarea {
            outline: none;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 用户输入评论 -->
        <comment @gotobaba="addFn"></comment>

        <!-- 渲染用户的评论 -->
        <btns :ids="arr"></btns>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        let comment = {
            template: `
                        <div>
                            <textarea name="" id="" cols="20" rows="5" v-model="ipt"></textarea>
                            <button @click="handlerClick">发表评论</button>
                        </div>
                    `,
            data() {
                return {
                    ipt: "",
                    list: [{
                        id: 1,
                        name: "alex",
                        contents: "今晚吃大排档",
                        count: 0,
                        time: "2021-10-11"

                    }, {
                        id: 2,
                        name: "alex",
                        contents: "今晚吃海鲜",
                        count: 0,
                        time: "2021-10-11"
                    }]
                }
            },
            created() {
                this.$emit("gotobaba", this.list);
            },
            methods: {
                handlerClick() {
                    if (!this.ipt) return;
                    this.list.push({
                        id: this.list.length,
                        name: "xxx",
                        contents: this.ipt,
                        count: 0,
                        time: "xxx-xx-xx"
                    });
                    this.ipt = "";
                    this.$emit("gotobaba", this.list);
                },
            }
        };

        let btns = {
            props: ["ids"],
            template: `
                        <div>
                            <div v-for="item in ids">
                                {{item.name}} {{item.time}} {{item.contents}} {{item.count}}
                                <button @click="zan(item)">点赞</button>
                                <button @click="top(item)">置顶</button>
                                <button @click="del(item)">删除</button>
                            </div>
                        </div>
                        `,

            methods: {
                zan(item) {
                    item.count++
                },
                top(item) {
                    this.ids.splice(this.ids.indexOf(item), 1);
                    this.ids.unshift(item);
                },
                del(item) {
                    this.ids.splice(this.ids.indexOf(item), 1);
                }
            }
        };


        let bus = new Vue();

        let vm = new Vue({
            el: "#app",
            data: {
                arr: []
            },
            components: {
                comment,
                btns
            },
            methods: {
                addFn(data) {
                    this.arr = data
                }
            }
        })
    </script>
</body>

</html>